<
<script setup lang="ts">
import { useUserStore } from '@/stores/userStore'
import SvgIcom from '@/components/SvgIcon/index.vue'
// 引入用户仓库
const userStore = useUserStore()
</script>

<template>
  <div class="container">
    <el-card>
      <div class="welcome">
        <el-avatar class="avatar" :size="90" :src="userStore.avatar" />
        <div class="title">
          <h3 class="greet">你好,{{ userStore.username }}</h3>
          <h4>MathMall后台系统</h4>
        </div>
      </div>
    </el-card>
    <svg-icom class="img" name="welcome" width="37.5rem" height="18.75rem"></svg-icom>
  </div>
</template>

<style scoped>
.container {
  padding: 1rem;

  .welcome {
    display: flex;

    .avatar {
      margin: 0 1rem;
    }

    .title {
      margin: 0 1rem;
    }

    .greet {
      margin-top: 1.5rem;
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }
  }

  .img {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }
}
</style>
